<template>
  <div>
        <MyTableVue :arr="list">
        <template #head>
          <th>#</th>
          <th>商品名称1</th>
          <th>价格</th>
          <th>标签</th>
          <th>操作</th>
        </template>
        <template #obj="scrope" >

          <td>{{scrope.row.id}}</td>
          <td>{{scrope.row.goods_name}}</td>
          <td>{{scrope.row.goods_price}}</td>
          <td>
            
            <input type="text" 
            style="display: block; width: 100px;" 
           v-if="scrope.row.inputVisible"
            v-focus
            @blur="scrope.row.inputVisible=false"
            @keydown.enter="inputEnter(scrope.row)"
            v-model="scrope.row.inputValue"
            @keydown.esc="scrope.row.inputValue=''">
            <button  
            class="btn btn-primary btn-sm add-tag" 
            style="display: block; " 
            v-else 
            @click="scrope.row.inputVisible=true">
            添加
          </button>
            <span v-for="(str,index) in scrope.row.tags" :key="index"  >
              {{str}}
            </span>
          </td>
          <td>
            <button class="btn btn-danger btn-sm" @click="btnDel(scrope.row.id)">删除</button>
        </td> 
          
        </template>
        
        </MyTableVue>
  </div>
</template>

<script>
  import MyTableVue from '../MyTable.vue';
  import axios from 'axios'
  axios.defaults.baseURL='https://www.escook.cn'
export default {
  components:{
    MyTableVue
  },
  data(){
    return{
      list:[],
      inputTxt:''
    }
  },
  created(){
    axios({
        url:'/api/goods',
    }).then((res)=>{
     this.list=res.data.data
    })
  },
  methods:{
    btnDel(id){
      let index = this.list.findIndex(obj => obj.id===id)
      this.list.splice(index,1)
    },
    inputEnter(obj){
      if (obj.inputValue.trim().length === 0) {
       alert('输入内容')
       return 
      }   obj.tags.push(obj.inputValue)
      obj.inputValue=''
    }
  }

}
</script>

<style>

</style>